<script setup lang="ts">
import { useRouter } from 'vue-router';
import TabTags from '@/pages/home/tabTags.vue';
import Swipes from '@/pages/home/swipes.vue';
import GoodsList from '@/pages/home/goodsList.vue';
import { homeGet } from '@/services/home.ts';

interface TabTagsComponent {
  tagList: Array<any>;
}
const $router = useRouter();
const TabTagsRef = ref<TabTagsComponent | null>(null);
const homeData = reactive({
  bannerList: [],
});

const onSearchClick = () => {
  $router.push({ path: '/search' });
};
const loadData = async () => {
  const { data, err } = await homeGet();
  if (err) {
    showToast(err);
  } else {
    homeData.bannerList = data.banner;
  }
};
onMounted(() => {
  loadData();
});
</script>

<template>
  <div class="home_container">
    <div class="home_search">
      <div class="search_box" @click="onSearchClick">
        <svg-icon icon-class="searchicon" size="1em" />
        <span class="search-text">搜索</span>
      </div>
    </div>
    <TabTags ref="TabTagsRef" />
    <Swipes :banner="homeData.bannerList"></Swipes>

    <div
      :class="{
        'list-container': TabTagsRef?.tagList,
        notTab: TabTagsRef?.tagList,
      }"
    >
      <GoodsList></GoodsList>
    </div>
  </div>
</template>

<style scoped lang="scss">
.home_container {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: #f6f6f6;

  .list-container {
    width: 100%;
    height: calc(100vh - 320px);
  }

  .notTab {
    width: 100%;
    height: calc(100vh - 276px);
  }

  .home_search {
    width: 100%;
    height: 49px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid #f6f6f6;
    background: white;

    .search_box {
      width: 100%;
      height: 32px;
      padding: 0 8px;
      border-radius: 100px;
      display: flex;
      align-items: center;
      background: #f6f6f6;

      .search-text {
        font-size: 15px;
        font-weight: 400;
        margin-left: 6px;
        color: #787878;
      }
    }

    .van-search {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
